<template>
	<view class="container">
		<view class="order-title h" @click="upLoadImg('h')">
			<view class="t">头像</view>
			<view class="head"><img mode="aspectFit" :src="vForm.avatar" alt=""></view>
		</view>
		<view class="order-title">
			<view class="t"><span>*</span>真实姓名</view>
			<view class="c"><input type="text" @input="contentChange" placeholder="请填写您的真实姓名" v-model="vForm.realname"><img
				 class="c_icon" src="/static/common/arrow-right.png" alt=""></view>
		</view>
		<view class="order-title gender">
			<view class="t"><span>*</span>性别</view>
			<view class="c">
				<view class="yticon icon-xuanzhong2 checkbox" :class="{checked: current==0}" @click="check('0')"><text>男</text></view>
				<view class="yticon icon-xuanzhong2 checkbox" :class="{checked: current==1}" @click="check('1')"><text>女</text></view>
				<!--<radio-group @change="radioChange">-->
				<!--<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">-->
				<!--<view class="pRadio">-->
				<!--<radio :value="item.value" :checked="index == current" /><view>{{item.name}}</view>-->
				<!--</view>-->
				<!--</label>-->
				<!--</radio-group>-->
			</view>
		</view>
		<view class="order-title" @click="navTo('/pages/user/edit_tel')">
			<view class="t"><span>*</span>手机号码</view>
			<view class="c"><text>{{vForm.phone}}</text>
				<img class="c_icon" src="/static/common/arrow-right.png" alt=""></view>
		</view>
		<view class="order-title">
			<view class="t"><span>*</span>身份证号</view>
			<view class="c">
				<input @focus="showIdCard" v-if="encryptionIdCard" type="text" maxlength="18" placeholder="请填写对应的有效身份证信息" v-model="idCard">
				<input @input="contentChange" v-if="!encryptionIdCard" type="text" maxlength="18" placeholder="请填写对应的有效身份证信息" v-model="vForm.idCard">
				<img class="c_icon" src="/static/common/arrow-right.png" alt="">
			</view>
		</view>
		<!-- <view class="cardImg">
			<view class="t">身份证照片（非必选）</view>
			<view class="c">
				<view class="img" @click="upLoadImg('a')"><img mode="aspectFit" :src="card0" alt=""></view>
				<view class="img" @click="upLoadImg('b')"><img mode="aspectFit" :src="card1" alt=""></view>
			</view>
			<view class="info">
				温馨提示：请上传原始比例的身份证正反面，请勿裁剪涂改，保证身份证信息清晰显示，否则无法通过审核
			</view>
		</view> -->
		<view class="whyVerified">
			<text class="title">为什么需要实名认证？</text>
			<view>
				<text class="dot">·</text><text class="addBlod">根据海关规定，</text>购买跨境商品需办理清关手续，请您配合进行实名认证，以确保您购买的商品顺利通过海关检查。（拉美购承诺所传身份证明只用于办理跨境商品的清关手续，不作它途使用，其它人均无法查看）。
			</view>
			<view class="duanluo">
				<text class="dot">·</text><text class="addBlod">实名认证规则：</text>购买跨境商品须填写拉美购账号注册人的<text class="addBlod">真实姓名，身份证号码，以及与实名一致的手机号，</text>部分商品下单时须提供收货人的实名信息（含身份证照片），具体请以下单时的提示为准。
			</view>
		</view>
		<view class="g-btn">
			<view class="btn" @click="save" v-show="showBtn">保存</view>
		</view>
	</view>
</template>
<script>
	import {
		_editUserDetail
	} from '../../common/vmeitime-http/mem.js'
	import {
		_upLoad7u
	} from '../../common/vmeitime-http/login.js'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				signStatus: false, //认证状态
				vForm: {
					avatar: "/static/missing-face.png",
					realname: "",
					gender: "",
					phone: "绑定手机号",
					idCard: "",
					cardPic: "",
				},
				current: "",
				card0: '/static/icon/v1.png',
				card1: '/static/icon/v2.png',
				showBtn: true,
				encryptionIdCard: true,
				idCard:""
			}
		},
		onLoad() {
			let wxUserInfo = uni.getStorageSync('wxUserInfo');
			let tempdata = uni.getStorageSync('relUserInfo');
			if (tempdata) {
				if (tempdata.realname) {
					this.showBtn = false
				}
				this.vForm.avatar = tempdata.avatar ? tempdata.avatar : wxUserInfo.avatarUrl;
				this.vForm.realname = tempdata.realname;
				this.vForm.gender = tempdata.gender;
				this.vForm.phone = tempdata.phone == "" ? '绑定手机号' : tempdata.phone ? tempdata.phone : '绑定手机号';
				if(tempdata.idCard){
					this.idCard = tempdata.idCard.replace(/(\d{6})\d{6}(\d{3})/, "$1******$2");
					this.vForm.idCard = tempdata.idCard;
				}
				/*展示赋值*/
				this.current = tempdata.gender;
				console.log(this.current)
				if (tempdata.cardPic) {
					this.card0 = !tempdata.cardPic.split(",")[0] || tempdata.cardPic.split(",")[0] == 'undefined' ?
						'/static/icon/v1.png' : tempdata.cardPic.split(",")[0];
					this.card1 = !tempdata.cardPic.split(",")[1] || tempdata.cardPic.split(",")[1] == 'undefined' ?
						'/static/icon/v2.png' : tempdata.cardPic.split(",")[1];
				}
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			showIdCard() {
				this.encryptionIdCard = false;
			},
			contentChange() {
				this.showBtn = true;
			},
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
			/*上传图片*/
			upLoadImg(n) {
				/*图片*/
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					//                        sourceType: ['album'], //从相册选择
					success: async function(res) {
						/*获取七牛签名*/
						let tempData = await _upLoad7u();
						uni.uploadFile({
							url: that.$up,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'token': tempData.data.data
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								if (n == "h") {
									that.vForm.avatar = that.$upImg + JSON.parse(uploadFileRes.data).key
								} else if (n == 'a') {
									that.card0 = that.$upImg + JSON.parse(uploadFileRes.data).key
								} else if (n == 'b') {
									that.card1 = that.$upImg + JSON.parse(uploadFileRes.data).key
								}
								that.showBtn = true
							}
						});
					}
				});

			},
			async save() {
				let para = this.vForm;
				para.gender = this.current
				if (this.card0 !== "/static/icon/v1.png" && this.card1 !== "/static/icon/v2.png") {
					para.cardPic = this.card0 + "," + this.card1
				}
				if (para.avatar == "/static/index/lameilvyou@2x.png") {
					para.avatar = "";
				}
				if (para.phone == "绑定手机号") {
					para.phone = ""
				}
				if (para.realname == "" || !para.realname) {
					this.$api.msg("请填写您的真实姓名");
					return false
				} else if (para.gender != '0' && para.gender != '1') {
					this.$api.msg("请选择您的性别");
					return false
				} else if (para.phone == "" || !para.phone) {
					this.$api.msg("请绑定您的手机号码");
					return false
				} else if (para.idCard == "" || !para.idCard) {
					this.$api.msg("请填写您的身份证号");
					return false
				}
				let tempData = await _editUserDetail(para);
				if (tempData.data.code == 200) {
					this.$api.msg("保存成功！");
					uni.navigateBack();
				};
			},
			radioChange(data) {
				this.vForm.gender = data.detail.value
			},
			//修改电话成功之后回调
			refreshPhone(data) {
				this.vForm.phone = data
				console.log(data)
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			check(n) {
				this.current = n;
				this.showBtn = true
			}
		}
	}
</script>
<style lang='scss'>
	page {
		background: #F2F2F2;
	}

	.order-title {
		margin-top: 10upx;
		display: flex;
		padding: 30upx;
		background: #ffffff;
		border-bottom: 2upx solid #f2f2f2;
		align-items: center;

		.c_icon {
			width: 48upx;
			height: 48upx;
		}

		&.h {
			padding: 20upx 30upx;
		}

		.t {
			font-size: 26upx;
			color: $font-color-dark;
			flex: 1;
		}

		.c {
			font-size: 26upx;
			color: #989898;
			display: flex;
			align-items: center;

			.c_icon {
				width: 48upx;
				height: 48upx;
			}

			.yticon {
				/*margin-top: 5upx;*/
			}
		}

		.head {
			width: 87upx;
			height: 87upx;
			border-radius: 50%;
			overflow: hidden;

			img {
				width: 100%;
				height: 87upx;
			}
		}

		input {
			font-size: 26upx;
			width: 420upx;
			text-align: right;

		}

		.code {
			display: flex;
			flex: 1;
			justify-content: center;
			font-size: 26upx;
			color: $uni-color-primary;
			border-left: 2upx solid #f2f2f2;
		}

		&.gender {
			.c {
				width: 240upx;
				display: flex;

				view {
					margin-right: 40upx;

					text {
						margin-left: 10upx;
					}
				}

				radio-group {
					display: flex;
					justify-content: space-between;

					.pRadio {
						display: flex;
						align-items: center;
					}
				}

			}

		}
	}

	.cardImg {
		background: #ffffff;

		.t {
			margin-top: 10upx;
			display: flex;
			padding: 30upx;
			background: #ffffff;
			margin-bottom: 20upx;
			align-items: center;
			font-size: 26rpx;
			color: #282828;
		}

		.c {
			display: flex;
			justify-content: space-between;
			padding: 0 30upx 30upx 30upx;

			img {
				width: 339upx;
				height: 211upx;
			}
		}

		.info {
			font-size: 20upx;
			color: #989898;
			padding: 0 30upx 50upx;
		}
	}

	.g-btn {
		margin: 30upx 0;
		width: 100%;
		bottom: 20upx;

		.btn {
			width: 690upx;
			color: #ffffff;
			background: $uni-color-primary;
			text-align: center;
			padding: 20upx 0;
			border-radius: 16upx;
			font-size: 32upx;
			margin: auto;
		}
	}

	/*复选框状态*/
	.checkbox.checked {
		color: $uni-color-primary;
	}

	span {
		color: red;
	}

	.whyVerified {
		color: #989898;
		font-size: 26upx;
		padding: 0 30upx;

		.title {
			color: #474747;
			font-size: 32upx;
			display: block;
			text-align: center;
			margin: 20upx 0;
		}

		.addBlod {
			color: #474747;
		}

		.dot {
			margin-right: 10upx;
		}

		.duanluo {
			margin: 40upx 0 20upx 0;
		}
	}
</style>
